<template>
  <van-cell>
    <van-image
      slot="icon"
      round
      width="30"
      height="30"
      style="margin-right: 10px"
      :src="cmt.aut_photo"
    />
    <span style="color: #466b9d" slot="title">{{ cmt.aut_name }}</span>
    <div slot="label">
      <p style="color: #363636">{{ cmt.content }}</p>
      <p>
        <span style="margin-right: 10px">{{ cmt.pubdate | relativeTime }}</span>
        <van-button size="mini" type="default">回复</van-button>
      </p>
    </div>
    <van-icon
      slot="right-icon"
      @click="clickZan"
      :name="cmt.is_liking ? 'like' : 'like-o'"
      :color="cmt.is_liking ? 'red' : '#777'"
    />
  </van-cell>
</template>

<script>
import { addLike, disLike } from '@/api/comment.js';

// 评论项组件
export default {
  name: 'comment-item',
  props: {
    // 评论数据对象
    cmt: {
      required: true,
    },
  },
  data() {
    return {};
  },
  methods: {
    async clickZan() {
      try {
        // 调用接口，发送请求 去 为本评论 点赞/取消赞
        // 如果已经 赞了，则 取消点赞
        if (this.cmt.is_liking) {
          await disLike(this.cmt.com_id);
        } else {
          // 如果未点赞，则 添加点赞
          await addLike(this.cmt.com_id);
        }
        this.$toast.success('操作成功 : )');
        // 取反图标样式
        this.cmt.is_liking = !this.cmt.is_liking;
      } catch (err) {
        this.$toast.fail('操作失败，请明年再试~！');
      }
    },
  },
  created() {},
  computed: {},
  watch: {},
  components: {},
};
</script>

<style lang="less" scoped>
</style>
